<template>
  <div class="my-input">
     <input :type="type" :placeholder="placeholder" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" @blur="$emit('blur')">
      <span class="center">
        <slot name="rule"></slot>
      </span>
      <span>
          <slot name="icon"></slot>
      </span>
     <!-- update 是更新的意思 -->
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props:{
    modelValue: [String,Number],
    placeholder: String,
    type:{
      type: String,
      default: 'text' // 默认值，父元素在没有指定的情况下，默认显示 'text'
    }
  },
  setup() {
    
  },
};
</script>
<style lang="scss" scoped>
.my-input{
 width: 100%;
 height: 50px;
 display: flex;
 align-items: center;
 background: #F5F5F5;
 border-radius: 5px;
 padding: 0 15px;
 box-sizing: border-box;
 margin-top: 30px;
 border: 1px solid transparent;
 .center{
   color: red;
   font-size: 12px;
   margin-right: 8px;
 }
 input{
   border: none;
   background: transparent;
   height: 60%;
   font-size: 14px;
   flex: 1;
   min-width: 100px;
 }
 span{
   height: 100%;
   display: inline-flex;
   align-items: center;
 }
}
</style>